<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 150px;
            opacity: 0.1;
        }
    </style>
</head>

<body>
    <div>
        123
    </div>
    <script>
        // 透明度  
        // opacity    0-1 
        // 0 完全透明  1 完全不透明  


        // 解决方案  :
            // 拿到 元素的透明度  得到的 是 [0,1] 不取整数 而是放大100倍 
            // 设置值得时候  缩小100倍 再设置  

            // 比如 获取透明度 是  0.6 
            // 0.6 *100 60 让60渐变  会看到过度效果  
            // 60 渐变到50  

            // 设置的时候  50 / 100 再设置给元素  

        // 目标  如果用户 传 left  width opacity 都能使用这一套代码实现效果 

        // 因为opacity比较特殊  如果是opacity单独操作  不是opacity 就使用原来的代码
        function move(ele,type,target,t=50){

            // 目标  如果是opacity 乘以100   才有渐变的效果  
            if(type == 'opacity'){
                target *= 100;
            }
            var timer = setInterval(()=>{
                let current;
                if(type=='opacity'){
                    // 获取值  如果是 opacity 乘以100 
                    current = window.getComputedStyle(ele)[type] * 100
                }else{
                    current = parseInt(window.getComputedStyle(ele)[type]);
                }
                // 每次变化的  (目标-元素新的位置)  /  10
                var duration = (target-current)/10;
                duration = duration>0?Math.ceil(duration):Math.floor(duration)
                if(current == target){
                    clearInterval(timer)
                }
                else{
                   if(type == 'opacity'){
                    // 如果是opacity 除以100以后 赋值  
                    // 元素 只接受  [0,1] 
                    ele.style[type] = (current+duration)/100;
                   }else{
                    ele.style[type] = current+duration + 'px';
                   }
                    
                }
                
            },t)
        }

        var divele = document.querySelector('div');
         divele.onclick = function(){
            move(this,'opacity',0.67);
            move(this,'width',666);
            move(this,'left',666);


         }
</script>

</body>
</html>
